<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	
	.module {
		width: 150px;
		height: 20px;
		background-color: #EEEEEE;
		font-size: 12px;
		text-align: center;
		margin: 10px 0 0 25px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		cursor: pointer;
		padding-top: 5px;
	}
	
	.module:hover {
		background-color: #CCCCCC;
		font-weight: bold;
	}
	
</style>
<div class="easyui-layout" fit="true">
	<div data-options="region:'west',split:true" title="功能模块" style="width:200px;overflow:hidden;">
		<div style="background:#fafafa;padding:5px;border:1px solid #ddd">
	        <a href="#" class="easyui-linkbutton" title="刷新" data-options="plain:true,iconCls:'icon-reload'" onclick="refreshBOModule()"></a>
	        <a href="#" class="easyui-linkbutton" title="新增" data-options="plain:true,iconCls:'icon-add'" onclick="addBOModule()"></a>
	        <a href="#" class="easyui-linkbutton" title="修改" data-options="plain:true,iconCls:'icon-edit'"></a>
	        <a href="#" class="easyui-linkbutton" title="删除" data-options="plain:true,iconCls:'icon-no'"></a>
	    </div>
	    <div id="boModuleList">
			<div class="module" onclick="loadBOList(this)">账簿</div>
	    </div>
	</div>
	<div data-options="region:'center'" style="overflow:hidden;">
		<div id="gridToolbar" style="background:#fafafa;padding:5px;border:1px solid #ddd">
	        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">刷新</a>
	        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">新增</a>
	        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">修改</a>
	        <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-no'">删除</a>
	    </div>
	    <table id="boGrid"></table>
	</div>
</div>

<script type="text/javascript">

	var selectedModule;
	
	$(function(){
		$('#boGrid').datagrid({
			width:$(document).width() - 482,
			height:$("#rightComponent").height() - 69,
			nowrap: true,
			autoRowHeight: false,
			striped: true,
			collapsible:true,
			url:'',
			sortName: 'name',
			sortOrder: 'desc',
			remoteSort: false,
			idField:'code',
			columns:[[
				{field:'name',title:'Name',width:120},
				{field:'addr',title:'Address',width:220,rowspan:2,sortable:true,
					sorter:function(a,b){
						return (a>b?1:-1);
					}
				},
				{field:'col4',title:'Col41',width:150,rowspan:2}
			]],
			pagination:true,
			rownumbers:true
		});
		var p = $('#boGrid').datagrid('getPager');
		$(p).pagination({
			onBeforeRefresh:function(){
				alert('before refresh');
			}
		});
	});

	
	function loadBOList(obj) {
		$(selectedModule).css("background-color", "#EEEEEE");
		$(selectedModule).css("font-weight", "normal");
		selectedModule = obj;
		$(selectedModule).css("background-color", "#CCCCCC");
		$(selectedModule).css("font-weight", "bold");
	}
	
	function loadBOModule() {
		$.post("${pageContext.request.contextPath}/boModule", {action:"loadBOModule"}, function(data){
			alert(data);
		});
	}
	
	function refreshBOModule() {
		loadBOModule();
	}
	
	function addBOModule() {
		$("#win").dialog({
		   title:"新增功能模块",
		   href:"bo/module_add.jsp",
		   width:300,
		   height:150,
		   modal: true,
		   onClose: function() {
			   $("#win").html("");
		   }
		});
	}
	
</script>